<!-- 我的佣金 -->
<template>
	<month-list ref="list" @goPage="goPage" :api="api" :params="{dataType}" @getDownCallback="downCallback">
		<view class="commission">
			<view class="commission-card">
				<view class="commission-card-top">
					总金额（元）
				</view>
				<view class="commission-card-mid">
					<view class="commission-card-mid-l">
						{{CountData.count1 || 0}}
					</view>
					<view class="commission-card-mid-r" @tap="nav('/subpackage/member/pages/orderType/index')">
						全部明细
					</view>
				</view>
				<view class="commission-card-bottom">
					<view class="b-box" @tap="getList(item,index)" v-for="(item,index) in 3" :key="index">
						<view class="b-box-title">{{publicCount[item].title}}</view>
						<view class="b-box-content">{{CountData[publicCount[item].key] || 0}}</view>
					</view>
					<view class="box-line" :style="computeLine" style='transform: "translate(33.33%*1,0)"'>
						<view class="line">
						</view>
					</view>
				</view>

			</view>
			<view class="commission-content">
				<!-- 质保金退还 余额体现 提现记录 -->
				<view class="commission-tabs">
					<u-icon v-for="(item,index) in tabs" :key="index" class="icon" space="20rpx" labelPos="bottom"
						:label="item.label" size="30" labelColor="#333" :name="item.name"
						@click="goTabsPage(item)"></u-icon>
				</view>

			</view>
		</view>
	</month-list>
</template>

<script>
	import {
		publicConfig,

	} from "@/api"
	import monthList from './components/monthList.vue'
	export default {
		components: {
			monthList
		},
		computed: {
			computeLine() {
				return {
					translate: `calc(33.33%/2  + (100%/3)*${this.tabsIndex} - 3%)`,
				}
			}
		},
		data() {
			return {
				tabsIndex: 0,
				publicCount: {
					1: {
						title: '预收入账户',
						key: 'count2'
					},
					2: {
						title: '余额账户',
						key: 'count3'
					},
					3: {
						title: '基础项',
						key: 'count4'
					}
				},
				api: 'getUserpriceList',
				dataType: '1',
				CountData: {},
				params: {
					whereTime: 'month',
				},
				tabs: [{
					label: '质保金退还',
					name: '/static/image/commission/sendBack.png',
					url: '/subpackage/member/pages/warranty/detail',
				}, {
					label: '余额提现',
					name: '/static/image/commission/balance.png',
					url: '/subpackage/member/pages/warranty/applyPayout?applytype=1',
				}, {
					label: '提现记录',
					name: '/static/image/commission/recording.png',
					url: '/subpackage/member/pages/commission/recordDetails',
					params: {
						countApi: 'getWithdrawCount',
						listApi: 'getWithdrawList',
						title: '提现总额'
					}
				}]
			}
		},
		async onLoad() {
			await this.getCount()
		},
		methods: {
			getList(value, index) {
				this.tabsIndex = index
				this.api = value === 3 ? 'getPayslipList' : 'getUserpriceList'
				this.dataType = value
				this.$nextTick(() => {
					this.downCallback()
				})
			},
			downCallback(fn) {
				// 根据子组件的mounted 传过来的函数 重新赋值给 downCallback让 父组件直接使用子组件的方法
				this.downCallback = fn
			},
			goTabsPage(item) {
				if (item?.url && item.params) {
					return this.nav(`${item.url}?params=${JSON.stringify(item.params ?? '')}`)
				} else {
					return this.nav(item.url)
				}
			},
			async submit() {
				const app = this
				const res = await uni.showModal({
					content: '是否确认?',
					success: ({
						confirm
					}) => {
						if (confirm) {
							app.SubmitEvent()
						}
					}
				})
			},
			async SubmitEvent() {
				const app = this
				const {
					code,
					msg
				} = await publicConfig('postNetsalaryStatus', {
					month: app.params['whereTime']
				})
				app.toast(msg)
				if (code === 1) {
					setTimeout(() => {
						app.getCount()
					}, 1000)
				}
			},
			goPage(data) {
				if (data.routePath) {
					this.nav(data.routePath)
				}
			},
			getCount() {
				// 只返回成功的值
				return Promise.resolve(publicConfig('getUserpriceCount').then(res => {
					const {
						code,
						data,
					} = res;
					if (code === 1) {
						this.CountData = data
					}
				}))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.commission {
		&-card {
			margin: 25rpx 25rpx 0 25rpx;
			background-color: #2357E9;
			padding: 35rpx 20rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			text-align: center;
			position: relative;
			background-image: url('/static/image/achievement.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;

			&-top {
				font-size: 33rpx;
				color: #FEFEFE;
				text-align: left;
				padding: 15rpx 0 0 20rpx;
			}

			&-mid {
				font-family: SimHei;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 100rpx;
				text-align: left;
				padding: 0 20rpx;
				margin: 20rpx 0;
				font-weight: bold;
				font-family: SimHei;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-r {
					font-size: 35rpx;
					background-color: #FEFEFE;
					font-weight: normal;
					color: #5d81fb;
					padding: 0 20rpx;
					line-height: 50rpx;
					border-radius: 25rpx;
				}
			}

			&-bottom {
				display: flex;
				position: relative;

				.b-box {
					position: relative;
					width: 33.33%;
					text-align: center;

					&-title {
						font-size: 22rpx;
						color: #FEFEFE;
						opacity: 0.8;
						margin-bottom: 20rpx;
					}

					&-content {
						font-size: 29rpx;
						font-weight: bold;
						color: #FEFEFE;
					}

					&:nth-child(n+2):before {
						content: '';
						position: absolute;
						height: 100%;
						left: 0;
						top: 0;
						width: 1px;
						transform: scaleX(0.5);
						background-color: #999999;
						transform-origin: 50% 100%;
					}

				}

				.box-line {
					position: absolute;
					bottom: -10rpx;
					width: 100%;
					transform: translate(0, 0);
					transition: .5s;

					.line {
						height: 5rpx;
						background-color: #fff;
						width: 6%;
					}
				}
			}
		}

		&-tabs {
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx 25rpx;

			.icon {
				flex: 1
			}
		}

	}

	.list-box {
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx;
		margin-top: 20rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		flex-wrap: wrap;

		&-left {
			.title {
				font-size: 33rpx;
				color: #333333;
				margin-bottom: 15rpx;
			}

			.time {
				font-size: 25rpx;
				color: #999999;
			}
		}

		&-right {
			display: flex;
			align-items: center;


		}

		&-item {
			width: 50%
		}
	}

	.data-box {
		margin-top: 10px;
		background: #F8F8F8;

		.data-title {
			font-size: 36rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			border-bottom: 0.5px solid #000;


		}
	}

	.price {
		font-size: 38rpx;
		color: #4CA897;
		margin-right: 25rpx;
	}


	// 底部操作栏
	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		display: flex;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;

		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		justify-content: center;
		align-items: center;
		height: 106rpx;

		.button {
			width: 50%
		}
	}
</style>